Range
A jQuery plugin for cross browser range inputs.
Demo
Basic
Custom Labels
No Labels
Custom Range
Vertical
Use
Main
range.js
range.css
Dependencies
jQuery
core.js
touch.js
Basic
Range will convert an input into a customizable slider interface:
$("input[type=range]").range();
<input type="range">
Limits
Range will automatically detect the minimum, maximum and increment values based on the min
, max
and step
attributes:
<input type="range" min="2" max="20" step="2">
Vertical
Create a vertical slider with the orient
attribute:
<input type="range" orient="vertical">
Options
Set instance options by passing a valid object at initialization, or to the public defaults
method. Custom options for a specific instance can also be set by attaching a data-range-options
attribute to the target elment. This attribute should contain the properly formatted JSON object representing the custom options.
Name | Type | Default | Description |
---|---|---|---|
customClass |
string |
'' |
Class applied to instance |
formatter |
function |
false |
Value format function |
labels |
boolean |
true |
Draw labels |
labels.max |
string |
Max value label; defaults to max value | |
labels.min |
string |
Min value label; defaults to min value | |
vertical |
boolean |
false |
Methods
Methods are publicly available to all active instances, unless otherwise stated.
defaults
Extends plugin default settings; effects instances created hereafter.
$.range("defaults", { ... });
Parameters
Name | Type | Default | Description |
---|---|---|---|
options |
object |
{} |
New plugin defaults |
destroy
Removes plugin instance.
$(".target").range("destroy");
disable
Disables target instance
$(".target").range("disable");
enable
Enables target instance
$(".target").range("enable");
resize
Resizes instance
$(".target").range("resize");